<template>
    <div>
        <div class="header">
            <div class="logo"></div>
            <div class="right-header">
                <ul class="placeul">
                    <li></li>
                    <li>{{menu}}</li>
                    <li v-if="submenu">{{submenu}}</li>
                </ul>
                <topheader style="margin-right: 20px"></topheader>
            </div>
        </div>

        <div class="menu">
            <div class="scroll-wrap">
                <el-menu :default-active="$route.path" class="el-menu-vertical-demo"  :unique-opened="true"
                         @select="handleSelect"  :collapse="isCollapse" background-color="rgb(52,73,94)"
                         text-color="#fff" active-text-color="#fff" width="100%;" router>
                    <template v-for="(item,index) in menuList" >
                        <el-menu-item  v-if="item.path" :index="item.path" class="submenu-one" :key="index" >
                            <i :class="item.icon"></i><span slot="title"  class="hover-text" style="font-size: 16px;">{{item.name}}</span>
                        </el-menu-item>
                        <el-submenu v-else :index="(index+1).toString()" >
                            <template slot="title" class="fengde"><i :class="item.icon"></i><span>{{item.name}}</span></template>
                            <el-menu-item v-for="(list,sIdnex) in item.submenu" :index="list.path" :key="sIdnex" class="tests" style="font-size: 14px" >
                                <span class="sub-scorll-lien"></span></an> <span class="hover-text">{{list.name}}</span>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                </el-menu>
            </div>

        </div>

        <div class="main" >
            <div class="main-wrap" >
                <!--   <router-view></router-view>-->
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.keepAlive"></router-view>
            </div>
        </div>

    </div>
</template>

<script>

    import topheader from '@/components/topheader'
    export default {
        components: {
            topheader
        },
        data(){
            return{
                menuList: [
                    {name: '首页', icon: 'el-icon-document', path: '/main/index/index'},
                    {name: '我的订单', icon: 'el-icon-document', path: '/main/order/index'},
                    {name: '活动管理', icon: 'el-icon-edit-outline', submenu: [
                        {name: '新建活动', path: '/main/activity/add'},
                        {name: '活动列表', path: '/main/activity/set'},
                    ]},
                    {name: '业务设置', icon: 'el-icon-edit-outline', submenu: [
                        {name: '营业时间', path: '/main/besset/time'},
                        {name: '跑腿价格', path: '/main/besset/pirce'},
                    ]}
                ],
                /*menuList:[],*/
                menu:'',
                submenu:'',
                isCollapse:false,
                mainLeft:'',
            }
        },

        methods: {
            getMenuList(){
                this.$http.get('/server/purview/menuList', {headers: {isCancel: true}})
                    .then(res => {
                        //this.isloading = false
                        const datas = res.data
                        if (datas.success) {
                            if (this.$route.query.redirect) {

                            } else {

                            }
                        } else {
                            this.loginMsgAlert(datas.errorMsg)

                        }
                    })
                    .catch(err=>{   //需要申明
                        this.isloading = false;
                        //可以不用申明，但控制器会报错 并暴漏错误信息
                    })
            },
            getPathTitle(path){
                this.menuList.forEach(item => {
                    if(item.path){
                        if(item.path == path){
                            this.menu = item.name
                            this.submenu = ''
                        }
                    }else{
                        item.submenu.forEach(list => {
                            if(list.path ==path){
                                this.menu = item.name
                                this.submenu = list.name
                            }
                        })
                    }
                })
            },
            handleSelect(key, keyPath) {
                this.getPathTitle(key)
            },
        },
        created(){
            this.getMenuList()
            this.getPathTitle(this.$route.path)       //获取当前菜单名称
        },
    }
</script>

<style scoped>
    .header{
        position: fixed;
        top:0;
        left: 0;
        right:0;
        min-width: 1420px;
        overflow-x: hidden;
        z-index: 9;
        height:47px;
        background: #fff;
    }
    .logo{
        float: left;
        width: 200px;
        height: 46px;
        background: url('/static/img/logo.jpg') no-repeat center center;
        background-size: 100% 100%;
        color:#fff;
    }

    .right-header{
        width: 100%;
        height: 46px;
        border-bottom: 1px solid rgb(191, 199, 217);
        background:#fff;
    }
    .placeul li {
        float: left;
        line-height: 46px;
        padding-left:20px;
        padding-right: 12px;
        font-size: 18px;
        font-weight: bold;
        background: url(/static/img/rlist.gif) no-repeat right;
    }

    .placeul li:last-child {
        background: none;
    }
    .menu {
        position: fixed;
        left: 0;
        top:46px;
        bottom: 0px;
        z-index: 99;
        width: 200px;
        overflow-y:auto;
        background: rgb(52,73,94);
        overflow-x: hidden;

    }
    .menu .scroll-wrap{
        width: 220px;
        height: 100%;
        overflow-y: scroll;
    }
    .main{
        margin-left: 215px;
        margin-top: 60px;
        background-color: #f2f2f2;

    }
    .main .main-wrap{
        border-radius: 8px;
        margin-right: 15px;
        margin-bottom: 15px;
        min-width: 1200px;
        overflow: hidden
    }
    .submenu-one i{
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .el-menu-item.is-active {
        color: #5fafe4 !important;
    }
    .el-menu-item.is-active .sub-scorll-lien{
        border-left: 1px solid #5fafe4 !important;
    }
    .sub-scorll-lien {
        display: inline-block;
        width: 10px;
        margin-left: 30px;
        height: 42px;
        border-left: 1px solid #99cbee;
    }
    .el-submenu [class^=el-icon1-] {
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;

    }
</style>